<template>
  <view class="ranking-container">
    <!-- 顶部导航栏 -->
    <u-navbar
      title="排行榜"
      :border-bottom="false"
      bg-color="#ffffff"
      title-color="#000000"
      :left-icon="'arrow-left'"
      @left-click="goBack"
    >
      <view slot="right" class="navbar-right">
        <u-icon name="more-dot-fill" size="20" color="#666" @click="showMoreOptions"></u-icon>
        <u-icon name="setting" size="20" color="#666" @click="showSettings" style="margin-left: 15px;"></u-icon>
      </view>
    </u-navbar>

    <!-- 分类选择 -->
    <view class="category-section">
      <view class="category-container">
        <view 
          v-for="(category, index) in categories" 
          :key="index"
          class="category-item"
          :class="{ 'active': category.isActive }"
          @click="selectCategory(index)"
        >
          <text class="category-text" :class="{ 'active-text': category.isActive }">{{ category.name }}</text>
        </view>
      </view>
    </view>

    <!-- 标签页切换 -->
    <view class="tabs-section">
      <view class="tabs-container">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          class="tab-item"
          :class="{ 'active': tab.isActive }"
          @click="switchTab(index)"
        >
          <text class="tab-text" :class="{ 'active-text': tab.isActive }">{{ tab.name }}</text>
          <view v-if="tab.isActive" class="tab-underline"></view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="products-section">
      <view 
        v-for="(product, index) in currentProducts" 
        :key="index"
        class="product-item"
        @click="goToProductDetail(product)"
      >
        <!-- 排名标识 -->
        <view class="ranking-badge">
          <text class="ranking-number">{{ product.ranking }}</text>
        </view>
        
        <!-- 商品图片 -->
        <view class="product-image-container">
          <image class="product-image" :src="product.image" mode="aspectFill"></image>
        </view>
        
        <!-- 商品信息 -->
        <view class="product-info">
          <text class="product-title">{{ product.title }}</text>
          <text class="product-attributes">{{ product.attributes }}</text>
          <view class="price-section">
            <text class="product-price">¥{{ product.price }}</text>
            <view class="sales-heat">
              <text class="heat-text">销售热度{{ product.salesHeat }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more-section">
      <u-loadmore 
        :status="loadMoreStatus" 
        :loading-text="loadingText"
        :loadmore-text="loadMoreText"
        :nomore-text="noMoreText"
        @loadmore="loadMore"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { name: '全部', isActive: true, type: 'all' },
        { name: '女装', isActive: false, type: 'women' },
        { name: '男装', isActive: false, type: 'men' }
      ],
      tabs: [
        { name: '新品特卖榜', isActive: true, type: 'new' },
        { name: '商品好评榜', isActive: false, type: 'review' },
        { name: '当季热卖榜', isActive: false, type: 'hot' }
      ],
      // 分页相关数据
      page: 1,
      pageSize: 10,
      hasMore: true,
      loadMoreStatus: 'loadmore',
      loadingText: '正在加载...',
      loadMoreText: '上拉加载更多',
      noMoreText: '没有更多数据了',
      
      // 不同榜单的商品数据
      rankingProducts: {
        'new': [
          {
            ranking: 1,
            title: '甜美可爱宽松T恤',
            attributes: '商品属性、规格',
            price: '321',
            salesHeat: '85',
            image: '/static/ranking-product1.jpg'
          },
          {
            ranking: 2,
            title: '钩花蕾丝衬衣',
            attributes: '商品属性、规格',
            price: '146',
            salesHeat: '90',
            image: '/static/ranking-product2.jpg'
          },
          {
            ranking: 3,
            title: '一字肩格纹衬衫',
            attributes: '商品属性、规格',
            price: '375',
            salesHeat: '80',
            image: '/static/ranking-product3.jpg'
          },
          {
            ranking: 4,
            title: '时尚百搭连衣裙',
            attributes: '商品属性、规格',
            price: '268',
            salesHeat: '75',
            image: '/static/ranking-product4.jpg'
          },
          {
            ranking: 5,
            title: '休闲运动套装',
            attributes: '商品属性、规格',
            price: '189',
            salesHeat: '88',
            image: '/static/ranking-product5.jpg'
          }
        ],
        'review': [
          {
            ranking: 1,
            title: '高性价比针织衫',
            attributes: '商品属性、规格',
            price: '156',
            salesHeat: '92',
            image: '/static/review-product1.jpg'
          },
          {
            ranking: 2,
            title: '舒适棉质T恤',
            attributes: '商品属性、规格',
            price: '89',
            salesHeat: '95',
            image: '/static/review-product2.jpg'
          },
          {
            ranking: 3,
            title: '时尚牛仔裤',
            attributes: '商品属性、规格',
            price: '234',
            salesHeat: '87',
            image: '/static/review-product3.jpg'
          },
          {
            ranking: 4,
            title: '优雅半身裙',
            attributes: '商品属性、规格',
            price: '198',
            salesHeat: '83',
            image: '/static/review-product4.jpg'
          },
          {
            ranking: 5,
            title: '经典白衬衫',
            attributes: '商品属性、规格',
            price: '167',
            salesHeat: '91',
            image: '/static/review-product5.jpg'
          }
        ],
        'hot': [
          {
            ranking: 1,
            title: '当季流行外套',
            attributes: '商品属性、规格',
            price: '456',
            salesHeat: '96',
            image: '/static/hot-product1.jpg'
          },
          {
            ranking: 2,
            title: '时尚卫衣套装',
            attributes: '商品属性、规格',
            price: '298',
            salesHeat: '94',
            image: '/static/hot-product2.jpg'
          },
          {
            ranking: 3,
            title: '潮流运动鞋',
            attributes: '商品属性、规格',
            price: '389',
            salesHeat: '89',
            image: '/static/hot-product3.jpg'
          },
          {
            ranking: 4,
            title: '时尚包包',
            attributes: '商品属性、规格',
            price: '267',
            salesHeat: '86',
            image: '/static/hot-product4.jpg'
          },
          {
            ranking: 5,
            title: '潮流配饰',
            attributes: '商品属性、规格',
            price: '145',
            salesHeat: '93',
            image: '/static/hot-product5.jpg'
          }
        ]
      }
    }
  },
  computed: {
    currentCategoryType() {
      const activeCategory = this.categories.find(category => category.isActive)
      return activeCategory ? activeCategory.type : 'all'
    },
    currentTabType() {
      const activeTab = this.tabs.find(tab => tab.isActive)
      return activeTab ? activeTab.type : 'new'
    },
    currentProducts() {
      const categoryType = this.currentCategoryType
      const tabType = this.currentTabType
      const key = `${categoryType}_${tabType}`
      return this.rankingProducts[key] || this.rankingProducts[tabType] || []
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showMoreOptions() {
      uni.showToast({
        title: '更多选项',
        icon: 'none'
      })
    },
    showSettings() {
      uni.showToast({
        title: '设置',
        icon: 'none'
      })
    },
    selectCategory(index) {
      // 重置所有分类状态
      this.categories.forEach((category, i) => {
        category.isActive = i === index
      })
      
      // 重置分页数据
      this.page = 1
      this.hasMore = true
      this.loadMoreStatus = 'loadmore'
      
      console.log('选择分类:', this.categories[index].name)
    },
    switchTab(index) {
      // 重置所有标签状态
      this.tabs.forEach((tab, i) => {
        tab.isActive = i === index
      })
      
      // 重置分页数据
      this.page = 1
      this.hasMore = true
      this.loadMoreStatus = 'loadmore'
      
      console.log('切换到标签:', this.tabs[index].name)
    },
         goToProductDetail(product) {
       // 跳转到商品详情页，传递商品ID
       uni.navigateTo({
         url: `/pages/product-detail/index?id=${product.ranking}`
       })
     },
    // 上拉加载更多
    loadMore() {
      if (this.loadMoreStatus === 'loading' || !this.hasMore) {
        return
      }
      
      this.loadMoreStatus = 'loading'
      
      // 模拟异步加载数据
      setTimeout(() => {
        this.loadMoreProducts()
      }, 1000)
    },
    
    // 加载更多商品数据
    loadMoreProducts() {
      const categoryType = this.currentCategoryType
      const tabType = this.currentTabType
      const key = `${categoryType}_${tabType}`
      const allProducts = this.rankingProducts[key] || this.rankingProducts[tabType] || []
      
      // 计算当前应该显示的商品数量
      const currentCount = this.page * this.pageSize
      
      if (currentCount >= allProducts.length) {
        // 没有更多数据了
        this.hasMore = false
        this.loadMoreStatus = 'nomore'
        return
      }
      
      // 获取下一页的数据
      const nextPageProducts = allProducts.slice(0, currentCount + this.pageSize)
      
      // 更新商品列表（这里只是模拟，实际应该追加到现有列表）
      this.rankingProducts[key] = nextPageProducts
      this.page++
      
      // 检查是否还有更多数据
      if (currentCount + this.pageSize >= allProducts.length) {
        this.hasMore = false
        this.loadMoreStatus = 'nomore'
      } else {
        this.loadMoreStatus = 'loadmore'
      }
    }
  },
  
  // 页面生命周期
  onReachBottom() {
    // 触底时自动加载更多
    this.loadMore()
  }
}
</script>

<style lang="scss" scoped>
.ranking-container {
  background-color: #ffffff;
  min-height: 100vh;
}

.navbar-right {
  display: flex;
  align-items: center;
  padding-right: 15px;
}

.category-section {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
}

.category-container {
  display: flex;
  padding: 0 15px;
}

.category-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  position: relative;
}

.category-text {
  font-size: 14px;
  color: #666666;
  font-weight: 500;
  
  &.active-text {
    color: #1abc9c;
    font-weight: bold;
  }
}

.tabs-section {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.tabs-container {
  display: flex;
  padding: 0 15px;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0;
  position: relative;
}

.tab-text {
  font-size: 16px;
  color: #666666;
  font-weight: 500;
  
  &.active-text {
    color: #1abc9c;
    font-weight: bold;
  }
}

.tab-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: #1abc9c;
  border-radius: 2px;
}

.products-section {
  padding: 15px;
}

.product-item {
  display: flex;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.ranking-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #1abc9c, #16a085);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.ranking-number {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}

.product-image-container {
  width: 100px;
  height: 100px;
  margin-right: 15px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8f8f8;
}

.product-image {
  width: 100%;
  height: 100%;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.product-attributes {
  font-size: 12px;
  color: #999999;
  margin-bottom: 12px;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 18px;
  font-weight: bold;
  color: #1abc9c;
}

.sales-heat {
  border: 1px solid #1abc9c;
  border-radius: 12px;
  padding: 4px 8px;
}

.heat-text {
  font-size: 12px;
  color: #1abc9c;
  font-weight: 500;
}

.load-more-section {
  padding: 20px 0;
  text-align: center;
}
</style> 